<template>
  <div id="app">
    <returntop></returntop>

    <div class="rettop"></div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="brand">
        <!-- 动态路由跳转页面 -->
        <router-link :to="`/home/brand/${item.id}`" tag="li" v-for="item in list" :key="item.id">
          <img :src="item.app_list_pic_url" alt="" />
          <div>
            <p>{{ item.name }}</p>
            <span></span>
            <p>{{ item.floor_price }}元起</p>
          </div>
        </router-link>
      </ul>
    </van-list>
  </div>
</template>

<script type="text/javascript">
import { brand } from "@/api/home/brand/index";
import returntop from "../../../components/homecomp/returntop";
export default {
  data() {
    return {
      list: [],
      //是否处于加载状态，加载过程中不触发load事件
      //进入页面默认为false
      loading: false,
      //是否已加载完成，加载完成后不再触发load事件
      //进入页面默认为false
      finished: false,

      start: 1,
    };
  },
  methods: {
    onLoad() {
      brand({
        page: this.start,
      }).then((res) => {
        this.list.push(...res.data);
        console.log(this.list);
        this.loading = false;
        this.start++;
        if (this.start > res.total) {
          this.finished = true;
        }
      });
    },
  },
  computed: {},
  components: {
    returntop,
  },
  created() {
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.rettop{
  height: 46px;
}
.brand {
  img {
    width: 100%;
  }
  li {
    position: relative;
  }
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    p {
      display: inline-block;
      color: #fff;
      font-size: 0.46667rem;
      font-weight: 700;
      margin: 0;
    }
    span{
        display: inline-block;
        width: 2px;
        height: 14px;
        background-color: #fff;
        margin: 0 5px;
    }
  }
}
</style>
